<template>
    <div class="app-container">
        <div class="container">
            <el-row>
                <el-form :inline="true" :model="listQuery">
                    <el-form-item label="用户名称">
                        <el-input v-model="listQuery.userName" placeholder="用户名称" clearable />
                    </el-form-item>
                    <el-form-item label="充值类型">
                        <el-select v-model="listQuery.chargeType" placeholder="筛选充值类型" clearable>
                            <el-option v-for="item in chargeTypeList" :key="item" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="起始时间">
                        <el-date-picker v-model="listQuery.startDate" type="date" value-format="YYYY-MM-DD"
                            placeholder="选择起始时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker v-model="listQuery.endDate" type="date" value-format="YYYY-MM-DD"
                            placeholder="选择结束时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSearch">查询</el-button>
                        <el-button v-if="$route.query.del" type="primary" @click="onDelete">删除</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-table :data="list" v-loading="listLoading" element-loading-text="拼命加载中" border fit
                    highlight-current-row @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column prop="subscribeType" width="255"  label="订阅类型" align="center">
                        <template #default="scope">
                            <el-tag>{{ getVipDesc(scope.row) }}</el-tag>
                            <div v-if="!scope.row.subscribeType && scope.row.pushStrategyId && scope.row.pushStrategyId.length">
                                <el-tag>{{  getStategyNames(scope.row.pushStrategyId) }}</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="userName" label="用户名称" align="center"></el-table-column>
                    <el-table-column prop="chargeType" label="充值类型" align="center"></el-table-column>
                    <el-table-column prop="operatorUserName" label="创建人" align="center"></el-table-column>
                    <el-table-column prop="createTime" label="创建日期" width="200" align="center"></el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="pagination">
                    <el-pagination layout="sizes, total, prev, pager, next" :page-sizes="[10, 20, 30]"
                        v-model:page-size="listQuery.pageSize" v-model:currentPage="listQuery.page"
                        @current-change="(val) => { fetchData() }" @size-change="(val) => { fetchData() }"
                        :total="totalRecord"></el-pagination>
                </div>
            </el-row>
        </div>
    </div>
</template>

<script>
import { getChargeHistory, getChargeType, deleteLog } from '@/api/charge'
import { utilsMixin } from '@/mixin/utils'
export default {
    name: 'EmailLog',
    mixins: [utilsMixin],
    data() {
        return {
            currentSelect: [],
            chargeTypeList: [],
            list: null, // 列表数据
            listLoading: true, // 加载状态
            totalRecord: 0, // 数据总条数
            listQuery: {
                page: 1,
                pageSize: 10,
                userName: '',  // 当前登录用户
                chargeType: '', // 充值类型，1个月/3个月
                startDate: '',
                endDate: '',
            },
            chargingDesc: {
                1: '一个月',
                3: '三个月',
                12: '十二个月',
            },
            testDesc: {
                1: '体验一天',
                3: '体验三天',
                7: '体验七天',
                14: '体验十四天',
            }
        }
    },
    created() {
        this.fetchData()
        this.getChargeType()
    },
    computed: {
        strategyList() {
            return this.$store.state.user.strategyList;
        }
    },
    methods: {
        getVipDesc(item) {
            return item.subscribeType ? '一卡通' : '单独订阅';
        },
        fetchData() {
            this.listLoading = true
            getChargeHistory(this.listQuery).then(res => {
                if (res.code === 20000) {
                    const { dataList = [],  totalCount = 0} = res.data || {};
                    this.list = dataList;
                    this.totalRecord = totalCount
                }
                this.listLoading = false
            }).catch(() => {
                this.listLoading = false
            })
            
        },
        handleSelectionChange(value) {
            this.currentSelect = value.map(item => item.id);
        },
        onDelete() {
            if (!this.currentSelect.length) return;
            // 删除充值记录
            deleteLog({
                chargeIds: this.currentSelect.join(','),
            }).then(res => {
                if (res.code === 20000) {
                    this.onSearch();
                    this.$message({
                        message: '删除成功！',
                        type: 'success'
                    });
                   
                }
            })
        },
        getStategyNames(ids) {
            const nameArr = [];
            this.strategyList.forEach(item => {
                if (ids.includes(item.id)) {
                    nameArr.push(item.strategyName);
                }
            });
            return nameArr.join(',')
        },
        getChargeType() {
            // 获取充值类型
            getChargeType().then(res => {
                if (res.code === 20000) {
                    this.chargeTypeList = res.data;
                }
            });
        },
        // 查询
        onSearch() {
            this.listQuery = Object.assign(this.listQuery, {
                page: 1
            });
            this.fetchData()
        }
    }
}
</script>

<style></style>
